<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/mockjs/mock.js"></script>
    <script src="../../js/angular-1.4.1/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="itemsController">
<div>
    搜索:<input type="text" ng-model="searchKey"/>
    排序:
    <button ng-click="changeOrderKey('better')">按评价</button>
    <button ng-click="changeOrderKey('price')">按价格</button>
    <button ng-click="changeOrderKey('saled')">按销量</button>
</div>
<br>

<div ng-repeat="item in items | filter:results | orderBy:orderKey"
     style="text-align: center;float: left;margin-left: 10px">
    <img ng-src="{{item.img}}" alt="测试图片"/>
    <h4 ng-bind="item.name"></h4>
    <h4>
        <span ng-bind="item.price|currency:'￥'"></span>
    </h4>
    <h4>已售:{{item.saled}}</h4>
    <h4>好评率:{{item.better}}</h4>
</div>

<script type="application/javascript">
    //使用mock进行ajax拦截及数据生成
    var data = Mock.mock("http://z.cn/getItems", {
        "items|12": [{
            "id|+1": 1, //Id，实际得到的是逐渐递增的
            "price": /[1-9]{4}/, //价格
            "name": /(iPhone|samsung|BlackBerry|WindowPhone)[0-9]/, //商品名称
            "img": "@DataImage(400x400,phone)", //图片
            "saled": /[1-9]{4}/, //销售数量
            "better": /[1-9]{4}/ //好评率
        }]
    });
    var app = angular.module("myApp", []);
    //$http服务，专门用来发送ajax请求的服务，Angularjs内置服务
    app.controller("itemsController", ["$scope", "$http", function ($scope, $http) {
        $scope.items = [];
        $http.get("http://z.cn/getItems").success(function (res) {
            console.log(res);
            $scope.items = res.items;
        });
        $scope.searchKey = "";
        $scope.results = function (value) {
            return value.name.indexOf($scope.searchKey) !== -1;
        };
        $scope.orderKey = "";
        $scope.changeOrderKey = function (o) {
            $scope.orderKey = o;
        }
    }]);
</script>
</body>
</html>